<template>
  <div>
    <div class="search-container">
      <el-row>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">CPU核心数 </div>
            <div>5 </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">CPU使用率 </div>
            <div>45.8% </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">操作系统使用率 </div>
            <div>45.8% </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">内存 </div>
            <div>128M </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">内存使用率 </div>
            <div>50% </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">磁盘状态 </div>
            <div>良好 </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">服务器IP </div>
            <div>1.1.2.3</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">系统架构 </div>
            <div>vue </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px; margin-bottom: 20px;">
        <el-col :span="6">
          <div style="display: flex;">
            <div style="width: 200px;">虚拟机信息 </div>
            <div>正常 </div>
          </div>
        </el-col>

      </el-row>
    </div>

    <div class="search-container">
      <el-row>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="card-header">
              <p class="card-header-title">CPU使用情况</p>
              <!-- <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p> -->
            </div>
            <v-chart class="chart" :option="barOptions" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="card-header">
              <p class="card-header-title">操作系统使用情况</p>
              <!-- <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p> -->
            </div>
            <v-chart class="chart" :option="barOptions" />
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;margin-bottom: 20px;">
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="card-header">
              <p class="card-header-title">内存使用情况</p>
              <!-- <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p> -->
            </div>
            <v-chart class="chart" :option="barOptions" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="card-header">
              <p class="card-header-title">磁盘使用情况</p>
              <!-- <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p> -->
            </div>
            <div style="display: flex;">
              <div style="width: 200px;">
                <div>
                  <span>未使用</span>
                  <span>1048M (60%)</span>
                </div>
                <div>
                  <span>已使用</span>
                  <span>735M (40%)</span>
                </div>
              </div>
              <div style="width:400px">
                <v-chart class="chart" :option="pieoption" />
              </div>
            </div>

          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { PropType, ref } from 'vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { barOptions, dashOpt1, dashOpt2, mapOptions, lineOptions } from './chart/options';
import chinaMap from '@/utils/china';

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  LineChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  MapChart,
]);
registerMap('china', chinaMap);

const barOptions = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
});

const pieoption = ref({

  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'right'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '未使用' },
        { value: 735, name: '已使用' },

      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
</script>

<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}

.chart {
  width: 100%;
  height: 400px;
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}
</style>